<template>
  <div class="mb-6 flex items-center justify-between">
    <div class="flex items-center justify-start font-medium">
      <h2 class="text-sm mr-2">{{ $t("我的邀请码") }}：</h2>
      <div class="flex items-center justify-start">
        <span>
          {{ useMerchant.merchantInfo.invite_code }}
        </span>
        <el-icon size="15" class="ml-2 cursor-pointer" @click="copyToClipboard">
          <CopyDocument />
        </el-icon>
      </div>
    </div>
  </div>
  <div class="flex justify-start items-center gap-x-20">
    <div class="flex items-center justify-start font-medium">
      <p class="mr-2 text-sm">{{ $t("已邀请人数") }}：</p>
      <div>{{ numberToCurrencyNo(data.total_user) }}</div>
    </div>
    <div class="flex items-center justify-start font-medium">
      <p class="mr-2 text-sm">{{ $t("返佣总金额") }}(USDT):</p>
      <div>{{ numberToCurrencyNo(data.total_rebate) }}</div>
    </div>
  </div>
  <el-tabs v-model="activeName" class="demo-tabs mt-4">
    <el-tab-pane :label="$t('我的邀请')" name="first">
      <el-table :data="inviteRecords" v-loading="loading" class="mt-2">
        <el-table-column :label="$t('用户')" align="center" prop="account">
        </el-table-column>
        <el-table-column :label="t('开卡数量')" align="center" prop="open_card">
        </el-table-column>
        <el-table-column
          :label="$t('绑定日期')"
          prop="createtime"
          :formatter="formatterTime"
          align="center"
        >
        </el-table-column>
      </el-table>
      <div class="mt-5 flex justify-center">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageable.total"
          :default-page-size="pageable.pageSize"
          :default-current-page="pageable.pageNum"
          :page-sizes="[5, 10, 20, 50]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-tab-pane>
    <el-tab-pane :label="$t('返佣记录')" name="second">
      <el-table :data="rebateRecords" v-loading="loading" class="mt-2">
        <el-table-column :label="$t('用户')" align="center" prop="account">
        </el-table-column>
        <el-table-column
          :label="`${$t('返佣金额')}（USDT）`"
          align="center"
          prop="rebate_amount"
        >
          <template #default="scope"
            >{{ numberToCurrencyNo(scope.row.rebate_amount) }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('返佣日期')"
          prop="createtime"
          :formatter="formatterTime"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="$t('结算状态')"
          align="center"
          prop="is_settled"
        >
          <template #default="scope"
            >{{ scope.row.is_settled ? $t("是") : $t("否") }}
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-5 flex justify-center">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageable1.total"
          :default-page-size="pageable1.pageSize"
          :default-current-page="pageable1.pageNum"
          :page-sizes="[5, 10, 20, 50]"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { reactive, ref } from "vue";
import { userInviteRecords, userRebateRecords } from "@/api/invite/index";
import { numberToCurrencyNo, formatterTime } from "@/utils/utils";
import { useMerchantStore } from "@/store/modules/merchant";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const useMerchant = useMerchantStore();
const loading = ref(false);
const data = reactive({
  total_user: 0, //已邀请人数
  total_rebate: 0, //返佣金额
});
// 分页;
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
// 分页;
const pageable1 = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const activeName = ref("first");
// 参数;
const param = () => {
  return {
    page: pageable.pageNum,
    pagesize: pageable.pageSize,
  };
};

const copyToClipboard = () => {
  navigator.clipboard
    .writeText(useMerchant.merchantInfo.invite_code)
    .then(() => {
      showSuccessMessage(t("复制成功"));
    })
    .catch((error) => {
      return false;
    });
  const showSuccessMessage = (message) => {
    ElMessage({
      showClose: true,
      message: message,
      type: "success",
    });
  };
};

const inviteRecords = ref([]);
const rebateRecords = ref([]);

const handleCurrentChange = (number) => {
  pageable.pageNum = number;
  getTbaleData();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getTbaleData();
};

const handleCurrentChange1 = (number) => {
  pageable1.pageNum = number;
  getRebateRecords();
};
// 条数
const handleSizeChange1 = (number) => {
  pageable1.pageSize = number;
  getRebateRecords();
};

const getTbaleData = async () => {
  const res = await userInviteRecords(param());
  inviteRecords.value = res.list;
  pageable.total = res.page.total_count || 0;
  data.total_rebate = Number(res.extra?.total_rebate) || 0;
  data.total_user = res.extra?.total_user || 0;
};

const getRebateRecords = async () => {
  const res = await userRebateRecords({
    page: pageable1.pageNum,
    pagesize: pageable1.pageSize,
  });
  rebateRecords.value = res.list || [];
  pageable1.total = res.page.total_count || 0;
};

Promise.all([getTbaleData(), getRebateRecords()]);
</script>
